<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #fab;
            /* 
                浮动元素 不会改住文字，文字会自动环绕在元素的周围
                    所以我们可以利用浮动来这只文字环绕图片的效果
            */
            float: left;
        }
        .box2{
            background-color: #bfc;
            /* 
                元素设置浮动后 将会在文档流中脱离 脱离后 元素的特点会发生变化

                脱离文档流的特点
                    块元素：
                        1.块元素不在多占一行
                        2.脱离文档流 后 块元素的高度和宽度都默认被内容撑开 
                    
                    行内元素：
                        1.行内元素脱离文档流后会变成块元素  特点和块元素一样

                    脱离文档流以后，不在区分块和行内元素
            */
            float: left;
        }
        .box3{
            background-color: #abf;
        }
        .s1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #cbf;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <p>【连载56】《痕影·心眼》（中篇小说连载五六）
        -
        两人也相互望了望着各自的表情，还有那惊讶的老凯，心里都在说道；到底有什么的大好事的呀？把这些黑褐色的石头拿来让我们看，还说是宝贝和好东西的呢？
        是的，谁想你这样就是一个专门读书和石头打交道的老痴人啊，石头里还有什么好东西呢？你就赶快说吧，别那么的打那么多的哑谜了，两人的心思都很焦急。是的，这就是我们村东头面的那一个山沟里的石头，我们是经常看到的，这有什么这么值得那样的希奇的哪。
        “这，这就是一种矿石，品位和成数是在五十度以上的锑矿石头，有的已经露出了表土。据我的反复勘察和测算，我们村东面的那一个马脊梁山脉的地下就有这种矿脉，它的储量也相当的可观，更是具有很高的开采价值，现在国际和国内的锑矿市场也蛮不错的，效益很好……”凯成福很是认真地说道。
        “好，好……。”李福村长和党支书老党听后，都同时地站了起来，捧着石头在心咯赞叹道。李福村长更是高兴得不得了，心里在说道：哎呀呀，想不到你凯成福真的有这么大本事，让石头变成了金子。真是财神更财神的哪。对啦，我们不就听说过吗，不是听自己的老爹在十多年前谈论过，在解放前，就有人和马帮钻进的那一个马脊梁山沟里去挖过这种石头，用马驮出去，后来不久，因为下了几场大雨那些洞子倒塌了压死了不少人的事情过。</p>
        <div class="box2">hello</div>
        <div class="box3">hello</div>

        <span class="s1">我是span</span>
</body>
</html>